<template>
    <div class="alarmArea">
        <div class="personDep_top">
            <div class="personDep_item" v-for="item in topList" :key="item">
                <div class="item_left">{{ item.title }}</div>
                <div class="count">
                    <count-to
                        :end="item.count"
                        count-class="count-text"
                        unit-class="unit-class"
                    ></count-to>
                </div>
            </div>
        </div>
        <div class="personDep_cneter">
            <div class="center_left">
                <div class="select">
                    <Select v-model="sceneID" placeholder="具体位置" @on-change="pageData.pageIndex = 1;handleGetLocations()">
                         <Option value="0">全部位置</Option>
                        <Option v-for="item in sceneList" :key="item.id" :value="item.id">{{item.sceneName}}</Option>
                    </Select>
                </div>
                <div class="select">
                    <Select v-model="deparmentID" placeholder="所属部门" @on-change="pageData.pageIndex = 1;handleGetLocations()">
                          <Option value="0">全部</Option>
                        <Option v-for="item in depList" :key="item.id" :value="item.id">{{item.departmentName}}</Option>
                    </Select>
                </div>
                <div class="select">
                    <Select v-model="status" placeholder="状态" @on-change="pageData.pageIndex = 1;handleGetLocations()">
                        <Option value="0">全部</Option>
                        <Option value="1">有效</Option>
                        <Option value="2">无效</Option>
                    </Select>
                </div>
                <div class="screen">
                    <img src="../../../assets/images/screen_yc.png" alt="" />
                </div>
            </div>
            <div class="center_right">
                <div class="add">
                    <Button type="primary">新增</Button>
                </div>
                <div class="more">
                    <Dropdown style="margin-left: 20px">
                        <Button type="primary">
                            更多
                            <Icon type="md-arrow-dropdown" />
                        </Button>
                        <Dropdown-menu slot="list">
                            <Dropdown-item>下拉菜单</Dropdown-item>
                        </Dropdown-menu>
                    </Dropdown>
                </div>
            </div>
        </div>
        <div class="personDep_bottom">
            <Table :columns="columnsList"  border :data="tableList">
                <template slot-scope="{ row }" slot="action">
                    <div class="action">
                        <p @click="row">修改</p>
                        <p @click="handleDelete(row)">删除</p>
                    </div>
                </template>
            </Table>
            <div class="footer_page">
                <Button type="primary" :loading="exportLoading" @click="handleGetQuchSearch">数据导出</Button>
                 <Page
                    :page-size="pageData.pageSize"
                    :current="pageData.pageIndex"
                    :total="pageData.total"
                        show-total
                    @on-change="handlePageChange"
                    show-elevator
                />
            </div>
        </div>
    </div>
</template>
<script>
import CountTo from '_c/count-to'
import { getLocations, getDepartment, getDepartmentNum, getScene, getQuchSearch, getDelete } from '@/api/baseData'
import excel from '@/libs/excel'
export default {
  name: 'personDep',
  components: {
    CountTo
  },
  data () {
    return {
      topList: [
        { title: '总区域数', count: '135' },
        { title: '有效', count: '28' },
        { title: '无效', count: '31' }
      ],
      list: [],
      columnsList: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          width: 150,
          title: '区域名称',
          key: 'locationName',
          align: 'center'
        },
        {
          title: '具体位置',
          key: 'sceneName',
          align: 'center'
        },
        {
          width: 150,
          title: '所属部门',
          key: 'department',
          align: 'center'
        },
        {
          width: 150,
          title: '状态',
          key: 'avality',
          align: 'center'
        },
        {
          width: 150,
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      deparmentID: 0,
      tableList: [],
      department_name: '',
      status: 0,
      pageData: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      sceneList: [],
      sceneID: 0,
      exportLoading: false
    }
  },
  mounted () {
    this.handleGetLocations()
    this.handleGetDepartment()
    this.getDepartmentNum()
    this.getScene()
  },
  methods: {
    handleDelete (row) {
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除',
        onOk: () => {
          getDelete({
            id: row.id
          }).then(res => {
            this.$Message.success('删除成功')
            this.handleGetLocations()
          })
        },
        onCancel: () => {

        }
      })
    },
    getScene () {
      getScene().then(res => {
        this.sceneList = res.data
      })
    },
    getDepartmentNum () {
      getDepartmentNum({
        st: 9,
        startDate: new Date().getFullYear() + '-01-01',
        stopDate: new Date().getFullYear() + '-12-31'
      }).then(res => {
        this.topList[0].count = res.data.one
        this.topList[1].count = res.data.two
        this.topList[2].count = res.data.three
      })
    },
    handleGetDepartment () {
      getDepartment({}).then((res) => {
        this.depList = res.data
      })
    },
    handlePageChange (val) {
      this.pageData.pageIndex = val
      this.handleGetLocations()
    },
    handleGetQuchSearch () {
      this.exportLoading = true
      getQuchSearch({
        factoryID: 16,
        sceneID: this.sceneID,
        deparmentID: this.deparmentID,
        isAvality: this.status
      }).then(res => {
        let arr = res.data.map((v, i) => {
          return {
            locationName: v.locationName,
            sceneName: v.scene.sceneName,
            department: v.department.departmentName,
            avality: v.avality ? '有效' : '无效',
            id: v.id
          }
        })
        if (arr.length) {
          const params = {
            title: ['区域名称', '具体位置', '所属部门', '状态'],
            key: ['locationName', 'sceneName', 'department', 'avality'],
            data: arr,
            autoWidth: true,
            filename: `预警区域_${Date.now()}`
          }
          excel.export_array_to_excel(params)
          this.exportLoading = false
        } else {
          this.$Message.info('暂无数据！')
          this.exportLoading = false
        }
      })
    },
    handleGetLocations () {
      getLocations({
        factoryID: 16,
        sceneID: this.sceneID,
        deparmentID: this.deparmentID,
        isAvality: this.status,
        pageIndex: this.pageData.pageIndex,
        pageSize: this.pageData.pageSize
      }).then((res) => {
        console.log(res.data)
        this.pageData.total = res.data.allCount
        let arr = res.data.locations.map((v, i) => {
          return {
            locationName: v.locationName,
            sceneName: v.scene.sceneName,
            department: v.department.departmentName,
            avality: v.avality ? '有效' : '无效',
            id: v.id
          }
        })
        console.log(arr)
        this.tableList = arr
      })
    }
  }
}
</script>
<style lang="less" scoped>
.alarmArea {
    .footer_page {
        display: flex;
        justify-content: space-between;
        margin-top: 26px;
        /deep/.ivu-btn {
            width: 120px;
        }
        /deep/.ivu-page-prev {
            background: #0e1420;
            border: 1px solid #0c1b39;
            .ivu-icon-ios-arrow-back:before {
                content: "上一页";
                padding: 0 19px;
                color: #ffffff;
            }
        }
        /deep/.ivu-page-options-elevator {
            input {
                background: #0e1420;
                border: 1px solid #0c1b39;
            }
        }
        /deep/.ivu-page-item {
            background: #0e1420;
            border: 1px solid #0c1b39;
            a {
                color: #ffffff;
            }
        }
        /deep/.ivu-page-item-active {
            background: #0078e3;
        }
        /deep/.ivu-page-next {
            background: #0e1420;
            border: 1px solid #0c1b39;
            .ivu-icon-ios-arrow-forward:before {
                content: "下一页";
                padding: 0 19px;
                color: #ffffff;
            }
        }
    }
    .personDep_bottom {
        margin-top: 7px;
        .ivu-table-wrapper {
            border-color: #0c1b39;
        }
        /deep/.ivu-table {
            background: #0e1420;
            .ivu-checkbox-inner {
                background-color: #0c1b39;
                border: 1px solid #ffffff;
                border-radius: 0;
            }
            .ivu-table-body{
                height: 48vh !important;
                overflow-y: scroll;
                overflow-x:hidden;
            }
            .action {
                display: flex;
                justify-content: space-around;
                color: #0087f0;
                p {
                    line-height: 1;
                    border-bottom: 1px solid #0087f0;
                    cursor: pointer;
                }
            }
            .ivu-checkbox-checked {
                .ivu-checkbox-inner {
                    background-color: #2d8cf0;
                    border: 1px solid #2d8cf0;
                    border-radius: 0;
                }
            }
            &:after,
            &:before {
                background-color: #0c1b39;
            }
            tr,
            th,
            td {
                background: #0e1420;
                border-color: #0c1b39;
                // border-right:2px;
            }
            th,
            td {
                height: 60px;
            }
            .ivu-table-cell {
                color: #fff;
                font-size: 16px;
            }
        }
    }
    .personDep_cneter {
        display: flex;
        justify-content: space-between;
        margin-top: 0.25rem;
        .center_left,
        .center_right {
            display: flex;
        }
        .center_right {
            /deep/.ivu-btn {
                width: 90px;
                font-size: 16px;
                padding: 0;
                height: 34px;
                line-height: 34px;
                vertical-align: 0;
                span {
                    display: block;
                    height: 34px;
                    display: flex;
                    justify-content: center;
                    i {
                        display: block;
                        height: 33px;
                        line-height: 34px;
                        border-left: 1px solid #fff;
                        padding-left: 5px;
                        margin-left: 10px;
                    }
                }
            }
        }
        .center_left {
            .input {
                height: auto;
                /deep/.ivu-input-wrapper {
                    .ivu-input {
                        background: #0e1420;
                        border: 1px solid #132851;
                        border-radius: 0;
                        transition: none;
                    }
                    .ivu-input:focus {
                        border: 1px solid #132851;
                        box-shadow: none;
                    }
                }
            }
            .select {
                margin-left: 6px;
                /deep/.ivu-select {
                    width: 2.07rem;
                    // height: .5rem;
                    background: #0e1420;
                    .ivu-select-selection {
                        background: #0e1420;
                        border-radius: 0;
                        border: 1px solid #132851;
                        box-shadow: none;
                        span {
                            border-right: 1px solid #132851;
                            margin-right: 32px;
                        }
                        .ivu-icon-ios-arrow-down {
                            font-size: 18px;
                        }
                        .ivu-icon-ios-arrow-down::before {
                            content: "\F33D";
                        }
                    }
                }
            }
            .screen {
                width: 0.3rem;
                margin-left: 0.19rem;
                // height: .5rem;
                img {
                    width: 100%;
                    // height: 100%;
                }
            }
        }
    }
    .personDep_top {
        display: flex;
        justify-content: space-around;
        .personDep_item {
            width: 2.97rem;
            height: 1.33rem;
            background: url("../../../assets/images/data_border.png") no-repeat;
            background-size: 100% 100%;
            display: flex;
            .item_left,
            .count {
                width: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .item_left {
                font-size: 0.22rem;
                font-weight: bold;
                color: #ffffff;
            }
            .count {
                /deep/.count-text {
                    font-size: 0.28rem;
                    font-weight: bold;
                    color: #0087f0;
                }
            }
        }
    }
}
</style>
